import { computed, watch } from "vue";
import usePatrolingStore from "@/store/patroling";
import { createRedArrow } from "../shared";
import { getList } from "@/api/robot-mission-template.js";

/*
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2023-02-21 10:28:50
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2023-02-27 13:57:04
 * @FilePath: \v2.0.0\src\views\patroling\composables\usePollingUpdate.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
export default () => {
  const patrolingData = usePatrolingStore();

  return {
    watchHeadingChange,
    watchPositionChange,
    watchMissionChange,
    updateExcutingMission,
  };

  function selectedCarMark() {
    return patrolingData.carMarks.find(
      (pin) => pin.entity.title === patrolingData.patrolingInfo.robotid
    );
  }

  function watchHeadingChange() {
    const heading = computed(() => {
      return patrolingData.patrolingInfo.heading || 0;
    });

    watch(heading, (val) => {
      selectedCarMark() &&
        selectedCarMark().setOptions({
          icon: createRedArrow(val),
        });
    });
  }

  function watchPositionChange() {
    const latitude = computed(() => patrolingData.patrolingInfo.latitude || 0);
    const longitude = computed(
      () => patrolingData.patrolingInfo.longitude || 0
    );
    watch(latitude, updateSelectedCarMarkPosition);
    watch(longitude, updateSelectedCarMarkPosition);

    function updateSelectedCarMarkPosition() {
      selectedCarMark() &&
        selectedCarMark().setLocation(
          new Microsoft.Maps.Location(latitude.value, longitude.value)
        );
    }
  }

  function watchMissionChange() {
    const missionId = computed(() => {
      return patrolingData.patrolingInfo.missionId || 0;
    });

    watch(missionId, updateExcutingMission);
  }

  async function updateExcutingMission(newMissionId: number) {
    patrolingData.excutingLayer.clear();
    if (!newMissionId) return;
    const mission = await getMission();
    const pins = generatePins();
    patrolingData.excutingLayer.add(pins);
    const line = generateLine();
    patrolingData.excutingLayer.add(line);

    async function getMission() {
      const { data } = await getList({ rtype: "patroling" });
      const template = data.find((item) => item.id === newMissionId);
      return template && JSON.parse(template.mission);
    }

    function generateLine() {
      const locations = mission.map((item) => {
        return new Microsoft.Maps.Location(item.x, item.y);
      });
      return new Microsoft.Maps.Polyline(locations, {
        strokeColor: "#00f749",
      });
    }

    function generatePins() {
      return mission.map((item, index) => {
        const location = new Microsoft.Maps.Location(item.x, item.y);
        return new Microsoft.Maps.Pushpin(location, {
          title: (index + 1).toString(),
          color: "#00f749",
        });
      });
    }
  }
};
